<!-- 橫幅 -->
<template>
  <div>
    <wxc-ep-slider :slider-id="sliderId"
                   :card-length='cardLength'
                   :card-s="cardSize"
                   :select-index="0">
      <div v-for="(v,index) in this.banners"
            :key="index"
            :slot="`card${index}_${sliderId}`"
            :class="['slider',`slider-item-${index}`]">
            <image style="width:100%;height:100%;border-radius: 20px;" :src="v.thumb"></image>
      </div>
    </wxc-ep-slider>
  </div>
</template>

<style scoped>
  .slider {
    width: 100%;
    height: 300px;
    background-color: #C3413D;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }

  .slider1 {
    background-color: #635147;
  }
</style>

<script>
import { WxcEpSlider } from 'weex-ui'
export default {
  components: {
    WxcEpSlider
  },
  props: {
    banners: Array,
    required: true
  },
  data () {
    return {
      sliderId: 1,
      cardLength: 1,
      cardSize: {
        width: 700,
        height: 300,
        spacing: 0,
        scale: 0.8
      }
    }
  },
  watch: {
    banners (newBanners, oldBanners) {
      this.cardLength = newBanners.length
    }
  }
}
</script>
